/* 我是slot的子组件 */
<template>
  <div>
    <!-- 匿名插槽 -->
    <div>
      <slot>
        <p>如果父组件没有内容我将作为默认内容</p>
      </slot>
    </div>

    <!-- 具名插槽 -->
    <div class="header">
      <slot name="header"></slot>
    </div>

    <div class="footer">
      <slot name="footer"></slot>
    </div>
    <!-- 作用域卡槽 -->
    <div>
      <slot msg="来自子组件的内容"></slot>
    </div>

    <!-- 作用域卡槽最具有代表性的事例是列表组件，允许自定义列表 -->
    <slot name="book" v-for="book in books" :bookName="book.name">
      <!-- 如果没有数据，这里写默认的slot默认数据 -->
    </slot>
  </div>
</template>


<script>
export default {
  name: 'slotChild',
  //用props来接受父组件的数组books
  props: {
    books: {
      type: Array,
      default: function () {
        return [] //返回出去一个数组
      }
    }
  },

  data () {
    return {

    }
  },
  /* 获取父组件卡槽的内容，基本用不到 */
  mounted: function (params) {
    var header = this.$slots.header //获取头部卡槽
    var main = this.$slots.default //获取默认卡槽
    // console.log(header)
    // console.log(header[0].elm.innerHTML)
  }
}
</script>
